<template>
    <div class="comFilterPopup">
        <van-popup v-model="filterPopup"
            safe-area-inset-bottom
            closeable
            position="right"
            @click-overlay="onClickOverlay"
            :style="{ minHeight: '100%', width: '86%' }">
            <div class="filter_container">
                <div class="all_title">筛选条件</div>
                <div class="all_content">
                    <div class="content_item">
                        <div class="item_title">职位属性</div>
                        <van-radio-group v-model="filterParams.select_position_attribute_id"
                            direction="horizontal"
                            class="item_desc">
                            <van-radio v-for="(item, index) in positionIdList"
                                :key="index"
                                style="margin-bottom: 16px"
                                :name="item.key">{{item.value}}</van-radio>
                        </van-radio-group>
                    </div>
                    <div class="content_item">
                        <div class="item_title">班制属性</div>
                        <van-radio-group v-model="filterParams.select_class_id"
                            direction="horizontal"
                            class="item_desc">
                            <van-radio v-for="(item, index) in classAttributeIdList"
                                :key="index"
                                style="margin-bottom: 16px"
                                :name="item.key">{{item.value}}</van-radio>
                        </van-radio-group>
                    </div>


                  <div class="content_item">
                    <div class="item_title">上班是否可带手机</div>
                    <van-radio-group v-model="filterParams.select_phone_id"
                                     direction="horizontal"
                                     class="item_desc">
                      <van-radio v-for="(item, index) in phoneList"
                                 :key="index"
                                 style="margin-bottom: 16px"
                                 :name="item.key">{{item.value}}</van-radio>
                    </van-radio-group>
                  </div>

                  <div class="content_item">
                    <div class="item_title">上班是否穿无尘服</div>
                    <van-radio-group v-model="filterParams.select_dustless_id"
                                     direction="horizontal"
                                     class="item_desc">
                      <van-radio v-for="(item, index) in dustlessList"
                                 :key="index"
                                 style="margin-bottom: 16px"
                                 :name="item.key">{{item.value}}</van-radio>
                    </van-radio-group>
                  </div>

                    <div class="content_item">
                        <div class="item_title">入职是否体检</div>
                        <van-radio-group v-model="filterParams.select_physial_id"
                            direction="horizontal"
                            class="item_desc">
                            <van-radio v-for="(item, index) in physialList"
                                :key="index"
                                style="margin-bottom: 16px"
                                :name="item.key">{{item.value}}</van-radio>
                        </van-radio-group>
                    </div>
                    <div class="content_item">
                        <div class="item_title">算薪方式</div>
                        <van-radio-group v-model="filterParams.select_payWay_id"
                            direction="horizontal"
                            class="item_desc">
                            <van-radio style="margin-bottom: 16px"
                                v-for="(item, index) in payMoneyModeList"
                                :key="index"
                                :name="item.id">{{item.name}}</van-radio>
                        </van-radio-group>
                    </div>

                  <div class="content_item">
                    <div class="item_title">发薪日</div>
                    <van-radio-group v-model="filterParams.select_payMoneyDay_id"
                                     direction="horizontal"
                                     class="item_desc">
                      <van-radio style="margin-bottom: 16px"
                                 v-for="(item, index) in paydayIdList"
                                 :key="index"
                                 :name="item.key"
                                 @click="changeSelectPayDayId(item.key)">{{item.value}}</van-radio>
                    </van-radio-group>
                    <template v-if="filterParams.select_payMoneyDay_id !== 1">
                    <van-field autocomplete="off" class="item_input"
                               v-show="filterParams.select_payMoneyDay_id && filterParams.select_payMoneyDay_id != '0'"
                               readonly
                               clickable
                               @click="handlePayMoneyDay"
                               :value="filterParams.select_payMoneyDay_detail"
                               name="filterParams.select_payMoneyDay_detail"
                               :label="`按${paydayIdObj[filterParams.select_payMoneyDay_id]}算`"
                               placeholder="请选择"
                    />
                  </template>
                  </div>


                  <div class="content_item">
                    <div class="item_title">每周是否可借支</div>
                    <van-radio-group v-model="filterParams.select_lendmoney_id"
                                     direction="horizontal"
                                     class="item_desc">
                      <van-radio v-for="(item, index) in lendMoneyList"
                                 :key="index"
                                 style="margin-bottom: 16px"
                                 :name="item.key">{{item.value}}</van-radio>
                    </van-radio-group>
                  </div>

                  <div class="content_item">
                    <div class="item_title">福利</div>
                    <van-checkbox-group v-model="filterParams.select_welfare_list"
                                        direction="horizontal"
                                        class="item_desc">
                      <van-checkbox style="margin-bottom: 16px"
                                    shape="square"
                                    v-for="(item, index) in computedBenefitsList"
                                    :name="item.key"
                                    :key="index">{{item.value}}
                      </van-checkbox>
                    </van-checkbox-group>
                  </div>


                    <div class="content_item">
                        <div class="item_title">学历</div>
                        <van-checkbox-group v-model="filterParams.select_formal_id"
                            direction="horizontal"
                            class="item_desc">
                            <van-checkbox style="margin-bottom: 16px"
                                shape="square"
                                v-for="(item, index) in formalList"
                                :name="item.key"
                                :key="index">{{item.value}}
                            </van-checkbox>
                        </van-checkbox-group>
                    </div>

                    <div class="content_item">
                        <div class="item_title">工作经验</div>
                        <van-radio-group v-model="filterParams.select_job_id"
                            direction="horizontal"
                            class="item_desc">
                            <van-radio v-for="(item, index) in jobList"
                                :key="index"
                                style="margin-bottom: 16px"
                                :name="item.key">{{item.value}}</van-radio>
                        </van-radio-group>
                    </div>

                    <div class="content_item">
                        <div class="item_title">证件类型</div>
                        <van-checkbox-group v-model="filterParams.select_card_id"
                            direction="horizontal"
                            class="item_desc">
                            <van-checkbox style="margin-bottom: 16px"
                                shape="square"
                                v-for="(item, index) in cardList"
                                :name="item.key"
                                :key="index">{{item.value}}
                            </van-checkbox>
                        </van-checkbox-group>
                    </div>



                    <div class="content_item">
                        <div class="item_title">发布时间</div>
                        <van-field autocomplete="off" class="item_desc"
                            label="年月日："
                            readonly
                            :value="filterParams.select_publish_date"
                            @click="isShowCalendar_publish = true"
                            placeholder="请选择" />
                    </div>
                    <van-row type="flex"
                        justify="space-between"
                        align="center"
                        class="filter_btn"
                    >

                        <van-col span="7">
                            <van-button type="info"
                                size="small"
                                block
                                round
                                plain
                                @click="handleFilter('cancel')">取消</van-button>
                        </van-col>
                        <van-col span="7">
                          <van-button type="danger"
                                      size="small"
                                      block
                                      round
                                      plain
                                      @click="handleFilter('reset')">重置</van-button>
                        </van-col>
                        <van-col span="7">
                            <van-button type="info"
                                size="small"
                                block
                                round
                                @click="handleFilter('yes')">确定</van-button>
                        </van-col>


                    </van-row>
                </div>
            </div>
        </van-popup>

        <van-calendar :min-date="minDate"
            :max-date="maxDate"
            v-model="isShowCalendar_pay"
            @confirm="onConfirm_pay" />
        <van-calendar :min-date="minDate"
            :max-date="maxDate"
            v-model="isShowCalendar_publish"
            @confirm="onConfirm_publish" />
        <van-popup v-model="weeklyOrMonthlyPicker"
            position="bottom">
            <van-picker show-toolbar
                :columns="weeklyOrMonthlyColumns"
                @confirm="confirmWeeklyConfirm"
                @cancel="weeklyOrMonthlyPicker = false" />
        </van-popup>

    </div>
</template>

<script>
import {paydayIdObj} from '../constants/comUtils'
import constant from '../utils/constant'

let monthlyColumns = []
for (let i = 1; i < 32; i++) {
  monthlyColumns.push('每月' + i.toString() + '号')
}

export default {
  name: 'comFilterPopup',
  data() {

    return {
      paydayIdList: [],
      paydayIdObj,
      classAttributeIdList: [],
      positionIdList: [],
      benefitsList: [],
      payMoneyModeList: [],

      filterPopup: false,
      /*
      * 统一好，命名规则。
      * 1表示为是，表示肯定语句， 0表示为否，带有否定词汇，
      * */
      physialList:[
        {key:1,value:'体检'},
        {key:0,value:'不体检'},
      ],
      phoneList:[
        {key:1,value:'可带'},
        {key:0,value:'不可带'},
      ],
      dustlessList:[
        {key:1,value:'必须穿'},
        {key:0,value:'不穿'},
      ],
      lendMoneyList:[
        {key:1,value:'可借支'},
        {key:0,value:'不可借支'},
      ],
      jobList:[
        {key:1,value:'1年一下'},
        {key:1,value:'1-2年'},
        {key:1,value:'3-5年'},
        {key:1,value:'6-7年'},
        {key:1,value:'8-10年'},
        {key:1,value:'10年以上'},
        {key:1,value:'不限'},
      ],
      formalList:[
        {key:1,value:'初中'},
        {key:2,value:'高中/中专'},
        {key:3,value:'大专'},
        {key:4,value:'本科'},
        {key:5,value:'硕士'},
        {key:6,value:'博士'},
        {key:7,value:'不限'},
      ],
      cardList:[
        {key:1,value:'身份证'},
        {key:2,value:'银行卡'},
        {key:3,value:'个人照片'},
        {key:4,value:'护照'},
        {key:5,value:'其他有效证件'}
      ],
      isShowCalendar_publish: false,
      isShowCalendar_pay: false,
      minDate: new Date(2021, 0, 1),
      maxDate: new Date(2030, 0, 31),
      weeklyOrMonthlyPicker: false,
      weeklyColumns: ['每周一', '每周二', '每周三', '每周四', '每周五', '每周六', '每周日'],
      monthlyColumns,
      weeklyOrMonthlyColumns: [],

      filterParams: {
        select_position_attribute_id: '',
        select_class_id: '',
        select_physial_id:'',
        select_phone_id: '',
        select_lendmoney_id: '',
        select_dustless_id: '',
        select_formal_id: [],
        select_job_id:'',
        select_card_id: [],
        select_welfare_list: [],
        select_payWay_id: '',
        select_payMoneyDay_id: '',
        select_payMoneyDay_detail: '',
        select_publish_date: ''
      },

      // 以页面的唯一标识作为key, 保存筛选条件的值
      pathnameStr: '',
    }
  },

  created() {
    this.init()
  },

  mounted() {
    const pathStr = this.$route.name;
    // console.log('---当前路径--------', pathStr);
    this.pathnameStr = pathStr
  },

  computed: {
    computedBenefitsList(){
      if (this.benefitsList.length === 0){
        return this.benefitsList
      } else {
        const res = this.benefitsList.map(cItem => ({
          key: cItem.key*1,
          value: cItem.value,
        }))

        // 按照字段排序
        function orderByKeyName(property){
          return function(a, b){
            let value1 = a[property];
            let value2 = b[property];
            return value1 - value2;
          }
        }

        res.sort(orderByKeyName('key'));
        // console.log('计算结果', res)
        return res
      }
    },
  },

  methods: {
    confirmWeeklyConfirm(value) {
      // 更新状态
      console.log('当前值', value)
      this.filterParams.select_payMoneyDay_detail = value
      this.weeklyOrMonthlyPicker = false
    },

    formatNumber(n) {
      n = n.toString()
      return n[1] ? n : '0' + n
    },

    _formatDate(date) {
      return `${date.getFullYear()}-${this.formatNumber(date.getMonth() + 1)}-${this.formatNumber(date.getDate())}`
    },

    onConfirm_publish(date) {
      // 发布日期
      this.isShowCalendar_publish = false
      this.filterParams.select_publish_date = this._formatDate(date)
    },

    onConfirm_pay(date) {
      // 公司按年结算
      this.isShowCalendar_pay = false
      this.filterParams.select_payMoneyDay_detail = `每年${date.getMonth() + 1}月${date.getDate()}日`
    },

    changeSelectPayDayId(id) {
      // 每一次切换，均置空数据
      this.filterParams.select_payMoneyDay_detail = ''
      this.filterParams.select_payMoneyDay_id = id
      if (id == '1') {
        this.weeklyOrMonthlyColumns = this.weeklyColumns
      } else {
        this.weeklyOrMonthlyColumns = this.monthlyColumns
      }
    },

    handlePayMoneyDay() {
      if (this.filterParams.select_payMoneyDay_id == '3') {
        this.isShowCalendar_pay = true
      } else {
        this.weeklyOrMonthlyPicker = true
      }
    },

    handleFilter(val) {

      // console.log('needFilterParams为:', needFilterParams);
      // sessionStorage.setItem(this.pathnameStr, JSON.stringify(needFilterParams));

      if (val === 'yes') {

        // 确定按钮
        const needFilterParams = {
          ...this.filterParams,
          select_welfare_list: this.filterParams.select_welfare_list.join(',')
        };
        this.$emit('getFilterPopUpVal', this.filterParams, needFilterParams)
        this.filterPopup = false
      } else if (val === 'cancel'){
        // 取消按钮
        // this.resetFilterParams();
        // this.$emit('getFilterPopUpVal', this.filterParams, needFilterParams)
        this.filterPopup = false
      } else if (val === 'reset'){
        // 重置按钮
        this.resetFilterParams();

        this.$nextTick(()=> {
          // 注意：此处的用法
          // DOM 更新了, vue的更新是异步的

          const needFilterParams = {
            ...this.filterParams,
            select_welfare_list: this.filterParams.select_welfare_list.join(',')
          };
          this.$emit('getFilterPopUpVal', this.filterParams, needFilterParams);
        });

        // this.filterPopup = false;
      }
    },

    changeFilterPopupState() {
      // 子组件的方法， 更改弹出层的状态
      this.filterPopup = true
    },

    /** 初始化配置信息 */
    init() {
      // 班制属性
      this.positionIdList = JSON.parse(localStorage.getItem(constant.STORAGE_CLASSPROPERTIES))
      // 职位属性
      this.classAttributeIdList = JSON.parse(localStorage.getItem(constant.STORAGE_JOBATTRIBUTES))
      // 福利列表
      this.benefitsList = localStorage.getItem(constant.STORAGE_BENEFITS) ? JSON.parse(localStorage.getItem(constant.STORAGE_BENEFITS)): [];
      // 算薪方式
      this.payMoneyModeList = JSON.parse(localStorage.getItem(constant.STORAGE_PAYMODES))
      // 发薪日
      this.paydayIdList = JSON.parse(localStorage.getItem(constant.STORAGE_PAYDAYS))
    },

    /** 重置筛选条件 */
    resetFilterParams() {
      this.filterParams = {
        select_position_attribute_id: '',
        select_class_id: '',
        select_welfare_list: [],
        select_payWay_id: '',
        select_payMoneyDay_id: '',
        select_payMoneyDay_detail: '',
        select_publish_date: ''
      }
    },

    /** 点击遮罩层，关闭popup, 子传父 */
    onClickOverlay() {
      // this.$emit('getFilterPopUpVal', this.filterParams)
    }
  }
}
</script>

<style lang="scss" scoped>
.comFilterPopup {
  width: 100%;
  .filter_container {
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
    .all_title {
      height: 46px;
      line-height: 46px;
      font-size: 14px;
      text-align: center;
      font-weight: bold;
    }
    .all_content {
      .content_item {
        .item_title {
          padding: 3px 10px;
          height: 26px;
          line-height: 26px;
          background-color: #f6f4f5;
        }
        .item_desc {
          padding: 10px 10px 0 10px;
          /deep/ .van-cell {
            padding: 0;
            color: #333333;
          }
          /deep/ .van-field__label {
            margin-right: 0;
            color: #333333;
            width: 5em;
          }
        }
        .item_input {
          padding-left: 10px;
          margin-top: -7px;
          /deep/ .van-cell {
            padding: 0;
            color: #333333;
          }
          /deep/ .van-field__label {
            margin-right: 0;
            color: #333333;
            width: 5em;
            padding-left: 6px;
          }
        }
      }
      .filter_btn {
        padding: 16px 10px;
      }
    }
  }
}
</style>
